<template>
	<view class="content">

		<view class="top">
			<view class="top1">
				<image src="@/static/activity/healthHome/top.png" mode=""></image>
			</view>
			<view class="top2">
				<image src="@/static/activity/healthHome/classroom.png" mode=""></image>
			</view>
		</view>

		<view class="middle">
			<view class="forr" v-for="(item, idx) in list" @click="stationVideo(item.description, item.title, item.video_url)">
				<view class="imgs">
					<image :src="item.imgs" mode=""></image>
				</view>
				<view class="diss">
					<view class=""><i>{{item.description}}</i></view>
					<view style="margin: 0 6rpx;"><i>/</i></view>
					<view class=""><i>{{item.title}}</i></view>
				</view>
				<view class="author"><i>主讲人: {{item.author}}</i></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			uni.showLoading({
				title: '请稍后...'
			});
			this.data_list();
		},
		methods: {
			data_list() {
				var self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 22,
					}
				}, function(res) {
					let data = res.data.data
					// console.log('data: ', res.data.data);
					for (var i = 0; i < data.length; i++) {
						if (data[i].id == 188) {
							// console.log('data: ', data[i]);
							// self.peizhi = []
							let children = data[i].children
							for (var j = 0; j < children.length; j++) {
								if (children[j].id == 200) {
									// console.log('children: ', children[j]);
									let init_index = children[j].init_index
									for (var z = 0; z < init_index.length; z++) {
										if (init_index[z].imgs) {
											let img = init_index[z].imgs.substring(2, init_index[z].imgs.length -
												2);
											init_index[z].imgs = img
										}
										// self.list.push(init_index[z])
										// self.list.push(init_index[z])
										// self.list.push(init_index[z])
									}
									self.list = children[j].init_index
								}
							}
						}
					}
					console.log('list: ', self.list);
				}, false)
			},
			stationVideo(description, title, video) {
				uni.navigateTo({
					url: '/pages/activities/healthHome/secondLevel/stationVideo?description=' + description + '&title=' + title + '&video=' +video
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../../../static/activity/healthHome/bj.jpg') 100% 100% / 100% 100%;
	}

	.top1 {
		width: 75%;
		height: 32rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.top1>image {
		width: 100%;
		height: 100%;
	}

	.top2 {
		width: 88%;
		height: 250rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.top2>image {
		width: 100%;
		height: 100%;
	}

	.middle {
		width: 88%;
		max-height: 1000rpx;
		overflow: auto;
		margin: 0 auto;
		margin-top: 50rpx;
		color: #0340A0;
		font-size: 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forr {
		margin-bottom: 20rpx;
	}

	.imgs {
		width: 315rpx;
		height: 210rpx;
		margin-bottom: 10rpx;
	}

	.imgs>image {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}

	.diss {
		margin-left: 18rpx;
		width: 297rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.author {
		width: 297rpx;
		margin-left: 18rpx;
		margin-top: 5rpx;
	}
</style>